import { useCascaderAreaData } from '@vant/area-data'
import {
  Button,
  Cascader,
  Checkbox,
  CheckboxGroup,
  Col,
  DatePicker,
  Form,
  FormItem,
  Image,
  Input,
  InputNumber,
  message,
  Row,
  Select,
  SelectOption,
  Textarea,
  TimePicker
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { userApi } from '@/apis'
import mrManageApi from '@/apis/mrManageApi'
import { MrStore } from '@/apis/mrManageTypes'
import UploadFile from '@/components/UploadFile'
import { useBack } from '@/hooks'
import router from '@/router'
import { bus, getAreaOptions, optionsToMap } from '@/utils'

export default defineComponent({
  name: 'MrStoresEdit',
  setup() {
    const { handleCancel } = useBack('refreshFormationList')
    const mrData = ref({} as MrStore)
    const img = ref('')
    const route = useRoute()
    const areaData = useCascaderAreaData()?.map(k => {
      return {
        ...k,
        children: k.children?.map(k2 => {
          return {
            ...k2,
            children: []
          }
        })
      }
    })

    onMounted(() => {
      if (route.query.id) {
        mrManageApi.getStoreDetail(route.query.id).then(res => {
          mrData.value = {
            ...res,
            workStartTime: res.workStartTime
              ? moment(res.workStartTime, 'HH:mm')
              : moment(),
            workEndTime: res.workEndTime
              ? moment(res.workEndTime, 'HH:mm')
              : moment(),
            addressValue: [],
            tags: []
          }
          const tags = [] as number[],
            addressValue = [] as string[]
          if (res?.experienceFlag && res?.experienceFlag !== '0') tags.push(1)
          if (res?.parkingSpot && res?.parkingSpot !== '0') tags.push(2)
          if (res?.peripheralProduct && res?.peripheralProduct !== '0')
            tags.push(3)
          if (res?.laserMark && res?.laserMark !== '0') tags.push(4)
          mrData.value.tags = tags

          if (res?.provinceCode) addressValue.push(res?.provinceCode)
          if (res?.cityCode) addressValue.push(res?.cityCode)
          mrData.value.addressValue = addressValue
          mrData.value.addressList = [
            {
              text: res?.province,
              value: res?.provinceCode
            },
            {
              text: res?.city,
              value: res?.cityCode
            }
          ]
        })
      }
    })
    function handleChangeAddress(value, selectedOptions) {
      console.log(value, selectedOptions)
      mrData.value.addressList = [...selectedOptions]
    }
    //取消
    function cancel() {
      handleCancel()
    }
    //保存
    function handleConfirm() {
      const params = {
        ...mrData.value,
        workStartTime: moment(mrData.value.workStartTime).format('HH:mm:ss'),
        workEndTime: moment(mrData.value.workEndTime).format('HH:mm:ss'),
        experienceFlag: mrData.value.tags?.includes(1) ? '免费试抽' : '0',
        parkingSpot: mrData.value.tags?.includes(2) ? '国标货足' : '0',
        peripheralProduct: mrData.value.tags?.includes(3) ? '售后无忧' : '0',
        laserMark: mrData.value.tags?.includes(4) ? '极速响应' : '0',
        province: mrData.value.addressList?.[0]?.text,
        city: mrData.value.addressList?.[1]?.text,
        provinceCode: mrData.value.addressList?.[0]?.value,
        cityCode: mrData.value.addressList?.[1]?.value
        // mrData.tags
      }
      console.log('===data', params)
      const action = route.query?.id
        ? mrManageApi.updateStore
        : mrManageApi.addStore
      action(params).then(res => {
        message.success('保存成功')
        handleCancel()
        // router.push({ name: 'MrNearbyStoresList' })
      })
      // mrManageApi.deleteFeedBack(mrData.value)
    }
    return { img, cancel, handleConfirm, handleChangeAddress, mrData, areaData }
  },
  render() {
    return (
      <div>
        <Form labelCol={{ span: 2 }}>
          <FormItem label="门店编号">
            <Input
              v-model:value={this.mrData.storeCode}
              maxlength={30}
              placeholder={'请输入'}
              style={{ width: '180px' }}
            ></Input>
          </FormItem>
          <FormItem label="门店名称">
            <Input
              v-model:value={this.mrData.storeName}
              maxlength={30}
              placeholder={'请输入'}
              style={{ width: '180px' }}
            ></Input>
          </FormItem>
          <FormItem label="门店电话">
            <Input
              v-model:value={this.mrData.phone}
              maxlength={30}
              placeholder={'请输入'}
              style={{ width: '180px' }}
            ></Input>
          </FormItem>
          <FormItem label="营业时间">
            <TimePicker
              v-model:value={this.mrData.workStartTime}
              format="HH:mm"
              style={{ width: '180px', marginRight: '10px' }}
              placeholder={'请选择'}
            ></TimePicker>
            -
            <TimePicker
              v-model:value={this.mrData.workEndTime}
              style={{ width: '180px', marginLeft: '10px' }}
              placeholder={'请选择'}
              format="HH:mm"
            ></TimePicker>
          </FormItem>
          <FormItem label="经度">
            <InputNumber
              v-model:value={this.mrData.lng}
              placeholder={'请输入'}
              style={{ width: '180px' }}
            ></InputNumber>
            <span style={{ marginLeft: '15px', color: '#aaaaaa' }}>
              小数点后可输入7位
            </span>
          </FormItem>
          <FormItem label="纬度">
            <InputNumber
              v-model:value={this.mrData.lat}
              placeholder={'请输入'}
              style={{ width: '180px' }}
            ></InputNumber>
            <span style={{ marginLeft: '15px', color: '#aaaaaa' }}>
              小数点后可输入7位
            </span>
          </FormItem>
          <div style={{ display: 'flex', marginLeft: '115px' }}>
            {/*<FormItem label="省">
              <Select
                placeholder={'请选择'}
                style={{ width: '180px', marginLeft: '5px' }}
              ></Select>
            </FormItem>
            <FormItem label="市" style={{ marginRight: '20px' }}>
              <Select
                placeholder={'请选择'}
                style={{
                  width: '180px',
                  marginLeft: '5px'
                }}
              ></Select>
            </FormItem>
            <FormItem>
              <span>区/县:</span>
              <Input
                placeholder={'请输入'}
                style={{ width: '180px', marginLeft: '5px' }}
              ></Input>
            </FormItem>*/}
          </div>
          <FormItem label="地区">
            <Cascader
              v-model:value={this.mrData.addressValue}
              fieldNames={{
                label: 'text',
                value: 'value'
              }}
              onChange={this.handleChangeAddress}
              options={this.areaData}
              placeholder="请选择"
              style={{ width: '160px' }}
            ></Cascader>
          </FormItem>
          <FormItem label="区县">
            <Input
              v-model:value={this.mrData.county}
              maxlength={30}
              placeholder={'请输入区/县'}
              style={{ width: '180px' }}
            ></Input>
          </FormItem>
          <FormItem label="详细地址">
            <Textarea
              v-model:value={this.mrData.address}
              placeholder={'请输入'}
              style={{ width: '330px', height: '80px' }}
            ></Textarea>
          </FormItem>
          <FormItem label="标签">
            <CheckboxGroup
              v-model:value={this.mrData.tags}
              style={{ width: '600px' }}
            >
              <Row type="flex">
                <Col span={4}>
                  <Checkbox value={1}>免费试抽</Checkbox>
                </Col>
                <Col span={4}>
                  <Checkbox value={2}>国标货足</Checkbox>
                </Col>
                <Col span={4}>
                  <Checkbox value={3}>售后无忧</Checkbox>
                </Col>
                <Col span={4}>
                  <Checkbox value={4}>极速响应</Checkbox>
                </Col>
              </Row>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="类型">
            <Select
              v-model:value={this.mrData.managingType2}
              style={{ width: '180px' }}
              placeholder={'请选择'}
            >
              <SelectOption value={'2'}>授权店</SelectOption>
              <SelectOption value={'1'}>自营店</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="门店等级">
            <Select
              v-model:value={this.mrData.preferredCounter}
              style={{ width: '180px' }}
              placeholder={'请选择'}
            >
              <SelectOption value={'优选店'}>优选店</SelectOption>
              <SelectOption value={'荣耀V1优选店'}>荣耀V1优选店</SelectOption>
              <SelectOption value={'荣耀V2优选店'}>荣耀V2优选店</SelectOption>
              <SelectOption value={'荣耀V3优选店'}>荣耀V3优选店</SelectOption>
            </Select>
          </FormItem>
          <FormItem label={'店长二维码'}>
            <UploadFile v-model={[this.mrData.shopQrCode, 'urls']}>
              上传图片
            </UploadFile>
          </FormItem>
          <FormItem
            style={{
              marginLeft: '300px',
              marginTop: '30px',
              marginBottom: '50px'
            }}
          >
            <Button
              style={{ width: '200px', height: '45px', marginRight: '100px' }}
              onClick={this.cancel}
            >
              取消
            </Button>
            <Button
              type="primary"
              style={{ width: '200px', height: '45px' }}
              onClick={this.handleConfirm}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
})
